<template>
    <div>
        <div class="container">
            <div class="row spl">
                <h1 class="col-12">特色服务</h1>
                <div class="col-lg-4" v-for="(key,val) in ser" :key="val">
                    <img :src="key.img" alt="" width="330" height="300">
                    <p>{{key.Ptxt}}</p>
                    <ul class="ul">
                        <li>> <span>愉悦感以及这些礼物</span></li>
                        <li>> <span>那些因遭受后果而遭受苦难的人的悲伤</span></li>
                        <li>> <span>人类幸福的主人</span></li>
                        <li>> <span>谴责错误坐</span></li>
                        <li>> <span>阐明过失放弃自己的责任</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row select">
                <h2 class="col-12">服务</h2>
                <div class="col-4 txt" v-for="(key,val) in sve" :key="val">
                    <span class="sp1" @click="enter()"><span :class="key.icon"></span></span>
                    <h3>{{key.h3txt}}</h3>
                    <p>{{key.ptxt}}</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <h2 class="col-12" style="color:rgb(238 66 149);">住宅房地产</h2>
                <div class="col-6 ban" v-for="(key,val) in erv" :key="val">
                    <div class="media">
                        <img :src="key.img" width="200" class="align-self-start mr-3 rounded-circle" alt="">
                        <div class="media-body">
                            <h3 class="mt-0">{{key.txt}}</h3>
                            <p>{{key.content}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "serve",
        data(){
            return {
                ser:[],
                sve:[],
                erv:[]
            }
        },
        mounted(){
            this.$axios('http://localhost:3000/serve').then((data)=>{
            console.log(data);
            this.ser=JSON.parse(data.data[0].ser);
            this.sve=JSON.parse(data.data[0].sve);
            this.erv=JSON.parse(data.data[0].erv);
          })
        },
        methods:{
            enter(){
                this.$router.replace({path:'/content'});
            }
        }
    }
</script>

<style scoped lang="less">
    ul{list-style: none;padding: 0;}
    .title{
        background-color: #f5f5f5;
        font-size: 1.5rem;
    }
    .title a{margin-left: 1rem;}
    p{margin-top: 1rem;
        margin-bottom: 1rem;
        font-family: serif;
        line-height: 1.7rem;}
    .select{background-color: #818080;padding: 0 4rem 5rem 5rem;}
    .spl{margin-bottom: 5rem;}
    .col-12{text-align: center;margin: 4rem 0}
    .txt{display: flex;
    flex-flow: column;
    align-items: center;}
    .txt h3{color: #fff;padding: 4rem 0 1rem;}
    .txt p{color: #fff;}
    .sp1{border-radius: 50%;
        background-color: #FF9BC1;
        display: flex;
        justify-content: center;
        height: 8rem;
        width: 8rem;}
    .sp1 span{font-size: 55px;
        color: #fff;
        line-height: 8rem;}
    .ban{margin-bottom: 4rem;}
    .mt-0{color: #ed6196;}
    .media-body{
        color: #FF9BC1;;
    }
</style>